<template>
	<view class="container">
	  <!-- 顶部基础信息区 -->
	  <view class="info-card">
		<view class="info-left">
		  <view class="name-wrap">
			<text class="company-name">{{ companyInfo.name }}</text>
			<text class="industry-tag">{{ companyInfo.industry }}</text>
		  </view>
		</view>
		<view class="info-right">
		  <view class="update-info">
			<text class="update-label">更新时间</text>
			<text class="update-time">{{ formatDate(updateInfo.lastUpdate) }}</text>
		  </view>
		  <view class="favorite-btn" @click="handleFavorite">
			<uni-icons type="star" size="50" color="#FAAD14"></uni-icons>
		  </view>
		</view>
	  </view>
  
	  <!-- 专利申请趋势图 -->
	  <view class="chart-card">
		<view class="card-header">专利申请趋势</view>
		<view class="chart-container">
		  <qiun-data-charts 
			type="line"
			:opts="lineOpts"
			:chartData="trendData"
			canvasId="trendLine"
		  />
		</view>
	  </view>
  
	  <!-- 专利类型分布图 -->
	  <view class="chart-card">
		<view class="card-header">专利类型分布</view>
		<view class="chart-container">
		  <qiun-data-charts 
			type="ring"
			:opts="ringOpts"
			:chartData="typeData"
			canvasId="typePie"
		  />
		</view>
	  </view>
  
	  <!-- 核心技术领域 -->
	  <view class="chart-card">
		<view class="card-header">核心技术领域分布</view>
		<view class="tech-list">
		  <view class="tech-item" v-for="(item, index) in techFields" :key="index">
			<text class="tech-name">{{item.name}}</text>
			<view class="progress-outer">
			  <view class="progress-inner" :style="{width: item.percent + '%'}"></view>
			</view>
		  </view>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		// 基础数据
		basicInfo: {},
		companyInfo: {},
		updateInfo: {},
		
		// 折线图配置
		lineOpts: {
		  color: ["#1890FF"],
		  padding: [15, 15, 15, 15],
		  enableScroll: false,
		  legend: { show: false },
		  xAxis: {
			disableGrid: true,
			fontColor: "#999999"
		  },
		  yAxis: {
			gridType: "dash",
			dashLength: 4,
			splitNumber: 5,
			min: 0,
			format: ""
		  },
		  extra: {
			line: {
			  type: "straight",
			  width: 2,
			  activeType: "hollow"
			}
		  }
		},
		// 趋势数据
		trendData: {
		  categories: [],
		  series: [{
			name: "专利申请量",
			data: []
		  }]
		},
		// 环形图配置
		ringOpts: {
		  padding: [15, 15, 15, 15],
		  enableScroll: false,
		  legend: {
			show: true,
			position: "bottom",
			lineHeight: 25,
		  },
		  extra: {
			ring: {
			  ringWidth: 30,
			  activeOpacity: 0.5
			}
		  },
		  color: ['#0088FE', '#00C49F', '#FFBB28']
		},
		// 类型数据
		typeData: {
		  series: [{
			data: []
		  }]
		},
		// 技术领域数据
		techFields: []
	  }
	},
	
	onLoad(options) {
		if (options.info) {
			try {
				const data = JSON.parse(decodeURIComponent(options.info))
				this.initializeData(data)
			} catch(e) {
				console.error('解析数据失败:', e)
				uni.showToast({
					title: '数据解析失败',
					icon: 'none'
				})
			}
		}
	},
	
	methods: {
	  initializeData(data) {
		// 设置基础信息
		this.basicInfo = data.basicInfo
		this.companyInfo = data.companyInfo
		this.updateInfo = data.updateInfo
		
		// 设置趋势图数据（从远到近排序）
		const trend = [...data.patentStats.yearDistribution.trend].reverse()
		this.trendData = {
			categories: trend.map(item => item.year),
			series: [{
				name: "专利申请量",
				data: trend.map(item => item.count)
			}]
		}
		
		// 设置类型分布图数据
		const typeDistribution = data.patentStats.typeDistribution.estimated
		this.typeData = {
			series: [{
				data: typeDistribution.map(item => ({
					name: item.type,
					value: item.count
				}))
			}]
		}
		
		// 设置技术领域数据
		this.techFields = data.patentStats.techFieldDistribution.fields.map(field => ({
			name: field.name,
			percent: field.percentage
		}))
	  },
	  
	  formatDate(dateString) {
		const date = new Date(dateString)
		return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
	  },
	  
	  handleExport() {
		uni.showToast({ title: '正在导出...', icon: 'loading' })
	  },
	  handleFavorite() {
		 uni.showToast({ title: '已收藏', icon: 'success' })
	  },
	  handleRefresh() {
		uni.showToast({ title: '更新中...', icon: 'loading' })
	  }
	}
  }
  </script>
  
  <style lang="scss">
  .container {
	padding: 30rpx;
	background: #F5F5F5;
  }
  
  .info-card {
	background: linear-gradient(to right, #FFFFFF, #F8FBFF);
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  
	.info-left {
	  .name-wrap {
		display: flex;
		align-items: center;
		gap: 20rpx;
  
		.company-name {
		  font-size: 44rpx;
		  font-weight: 600;
		  color: #2C3E50;
		  letter-spacing: 1rpx;
		}
  
		.industry-tag {
		  background: #EBF5FF;
		  color: #1890FF;
		  font-size: 24rpx;
		  padding: 6rpx 20rpx;
		  border-radius: 20rpx;
		  font-weight: 500;
		}
	  }
	}
  
	.info-right {
	  display: flex;
	  align-items: center;
	  gap: 30rpx;
  
	  .update-info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 4rpx;
  
		.update-label {
		  font-size: 22rpx;
		  color: #999;
		}
  
		.update-time {
		  font-size: 24rpx;
		  color: #666;
		  font-weight: 500;
		}
	  }
  
	  .favorite-btn {
		background: #FFF5E6;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
  
		&:active {
		  transform: scale(0.95);
		}
	  }
	}
  }
  
  .chart-card {
	background: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
  
	.card-header {
	  padding: 20rpx 30rpx;
	  font-size: 32rpx;
	  font-weight: bold;
	  border-bottom: 1rpx solid #EEEEEE;
	}
  
	.chart-container {
	  height: 600rpx;
	  padding: 20rpx;
	}
  }
  
  .tech-list {
	padding: 30rpx;
  
	.tech-item {
	  display: flex;
	  align-items: center;
	  margin-bottom: 20rpx;
  
	  .tech-name {
		width: 160rpx;
		font-size: 28rpx;
		color: #333;
	  }
  
	  .progress-outer {
		flex: 1;
		height: 16rpx;
		background: #F0F0F0;
		border-radius: 100rpx;
		overflow: hidden;
  
		.progress-inner {
		  height: 100%;
		  background: #1890FF;
		  border-radius: 100rpx;
		  transition: width 0.3s ease;
		}
	  }
	}
  }
  </style>